<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html, body, #container {
            height: 100%;
            margin: 0;
        }
        #panel {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 999;
            background: white;
            padding: 10px;
            border-radius: 8px;
        }
    </style>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=F1HTcXXaXIlbjdwO8hoZKXgJp1ZnQVAe"></script>
</head>
<body>
<div id="panel">
    起点：<input id="origin" value="40.01116,116.339303">
    终点：<input id="destination" value="39.936404,116.452562">
    <button onclick="searchRoute()">查询路线</button>
</div>
<div id="container"></div>

<script>
    var map = new BMapGL.Map("container");
    map.centerAndZoom(new BMapGL.Point(116.339303, 40.01116), 14);
    map.enableScrollWheelZoom(true);

    function searchRoute() {
        const origin = document.getElementById("origin").value;
        const destination = document.getElementById("destination").value;
        fetch(`http://localhost:8080/map/route?origin=${origin}&destination=${destination}`)
            .then(res => res.json())
            .then(data => {
                if (data.status === 0 && data.result.routes.length > 0) {
                    const route = data.result.routes[0];
                    const steps = route.steps;
                    const path = [];

                    // 提取所有步骤中的路径点
                    steps.forEach(step => {
                        step.path.forEach(point => {
                            const [lng, lat] = point.split(',');
                            path.push(new BMapGL.Point(parseFloat(lng), parseFloat(lat)));
                        });
                    });

                    // 清除旧覆盖物
                    map.clearOverlays();

                    // 绘制路线
                    const polyline = new BMapGL.Polyline(path, {
                        strokeColor: "#00aaff",
                        strokeWeight: 6
                    });
                    map.addOverlay(polyline);

                    // 移动到起点中心
                    const [lng, lat] = origin.split(',');
                    map.centerAndZoom(new BMapGL.Point(parseFloat(lng), parseFloat(lat)), 14);
                } else {
                    alert("未找到路线！");
                }
            })
            .catch(err => {
                console.error("查询失败:", err);
                alert("调用后端接口失败");
            });
    }
</script>
</body>
</html>